<!DOCTYPE html>
<html>

<head>
	<title>添加问卷</title>
	<!-- for-mobile-apps -->
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="keywords"
		content="Feedback Widget Responsive, Login form web template, Sign up Web Templates, Flat Web Templates, Login signup Responsive web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
	<!-- //for-mobile-apps -->
	<link href='//fonts.googleapis.com/css?family=Amaranth:400,400italic,700,700italic' rel='stylesheet'
		type='text/css'>
	<link
		href='//fonts.googleapis.com/css?family=Josefin+Slab:400,100,100italic,300,300italic,400italic,600,600italic,700,700italic'
		rel='stylesheet' type='text/css'>
	<link
		href='//fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic'
		rel='stylesheet' type='text/css'>
	<link href="css/styles.css" rel="stylesheet" type="text/css" media="all" />


	<link rel="stylesheet" href="css/modules/code.css">
	<link rel="stylesheet" href="css/modules/laydate/default/laydate.css">
	<link rel="stylesheet" href="css/modules/layer/default/layer.css">
	<link rel="stylesheet" href="css/layui.css">

	<link rel="stylesheet" href="css/bootstrap.min.css">
</head>

<body style="background-color:cadetblue">


	<div class="layui-layout layui-layout-admin">
		<div>
			<div class="layui-logo layui-hide-xs layui-bg-black" style="position: fixed;">选择需要添加的题型</div>
			<!-- 头部区域（可配合layui 已有的水平导航） -->
		</div>

		<div class="layui-side layui-bg-black">
			<div class="layui-side-scroll">
				<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
				<ul class="layui-nav layui-nav-tree" lay-filter="test">
					<li class="layui-nav-item layui-nav-itemed" style="margin-left: 50px; margin-bottom: 20px;">
						
						<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"
							data-whatever="@mdo">单选题</button>

					</li>
					<li class="layui-nav-item" style="margin-left: 50px; margin-bottom: 20px;">
						<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">
							评分题
						</button>

					</li>

					<li class="layui-nav-item" style="margin-left: 50px; margin-bottom: 20px;">
						<button type="button" class="btn btn-primary" onclick="returns()">返 回</button>
					</li>
				</ul>
			</div>
		</div>

	</div>


	<!-- 单选题模板 -->
	<form action=" /loneCheckDone" id="loneC" method="POST">
		<div class=" modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title" id="exampleModalLabel">单选题</h5>
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
					</div>
					<div class="modal-body">


						<div class="form-group row">
							<font style="margin-left: 20px; line-height: 70px; margin-right: 10px;"> 问题：</font>
							<textarea class="form-control" id="que" style="width: 400px;" name="quetions"></textarea>
						</div>


						<label for="message-text" class="col-form-label" style="margin-bottom: 20px;">输入选项：</label>


						<div class="form-group row">

							<font style="margin-left: 20px; line-height: 40px; margin-right: 10px;"> A .</font>
							<input type="text" class="form-control" id="problem1" style="width: 400px;" name="one">
						</div>
						<div class="form-group row">
							<font style="margin-left: 20px; line-height: 40px; margin-right: 10px;"> B .</font>
							<input type="text" class="form-control" id="problem2" style="width: 400px;" name="two">
						</div>
						<div class="form-group row">
							<font style="margin-left: 20px; line-height: 40px; margin-right: 10px;"> C .</font>
							<input type="text" class="form-control" id="problem3" style="width: 400px;" name="three">
						</div>
						<div class="form-group row">
							<font style="margin-left: 20px; line-height: 40px; margin-right: 10px;"> D .</font>
							<input type="text" class="form-control" id="problem4" style="width: 400px;" name="four">
						</div>
	</form>
	</div>
	<div class="modal-footer">
		<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
		<button type="button" class="btn btn-primary" data-dismiss="modal" 
		onclick="loneAdd();javascript:location.reload();">确定</button>
	</div>
	</div>
	</div>
	</div>








	<!-- 评分题模板 -->
	<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1"
		aria-labelledby="staticBackdropLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="staticBackdropLabel">问题</h5>
					<textarea class="form-control" id="message-text"></textarea>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<div class="modal-body">


				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
					<button type="button" class="btn btn-primary" onclick="numAdd()">确定</button>
				</div>
			</div>
		</div>
	</div>


<form action=" /createDone" id="create" method="POST">
	<div class="content">
		<h1>请添加你的问卷(此界面还未完成，只能添加单选题)</h1>
		<h1>(很抱歉添加后它会一直更新到最新状态)</h1>

		<div class="main" style="width: 1000px; margin:auto">

			<form>
				<h5>问卷标题</h5>
				<input id="title" name="title" type="text" value="输入标题" onfocus="this.value = '';"
					onblur="if (this.value == '') {this.value = '问卷标题';}" required="" class="layui-input" style="margin-bottom: 15px;">
				<h5>问卷类型</h5>
				<input type="text" name="type" value="输入类型" class="layui-input ddddd" id="type" onfocus="this.value = '';"
					onblur="if (this.value == '') {this.value = '问卷类型';}" required="">


				<!-- 问题所在div -->
				<div class="row">


					<div class="col-sm">
					
						{% for item in loneCheckq %}
						
						<h4 class="modal-title" id="staticBackdropLabel" style="margin-bottom: 10px;">单选题问题:
							{{item.question}}</h4>
						<h5> 选 项 ：</h5>

						<div class="form-group row">
							<font style="margin-left: 20px; line-height: 40px; margin-right: 10px;">
								<input type="radio" name="01" style="line-height: 80px;" > A . {{item.Check1}}
							</font>
						</div>
						<div class="form-group row">
							<font style="margin-left: 20px; line-height: 40px; margin-right: 10px;">
								<input type="radio" name="01" style="line-height: 80px;"> B . {{item.Check2}}
							</font>
						</div>
						<div class="form-group row">
							<font style="margin-left: 20px; line-height: 40px; margin-right: 10px;">
								<input type="radio" name="01" style="line-height: 80px;"> C . {{item.Check3}}
							</font>
						</div>
						<div class="form-group row">
							<font style="margin-left: 20px; line-height: 40px; margin-right: 10px;">
								<input type="radio" name="01" style="line-height: 80px;"> D . {{item.Check4}}
							</font>
						</div>

						{% endfor %}

					
					</div>
				</div>

				<h5> 问卷说明 <span>( 背景、评分标准等 ) </span> </h5>
				<textarea id="state" name="state" onfocus="if (this.value == '') {this.value = '问卷说明';}" required="""
						required=""></textarea>
				</form>


	<form>
		<h5>如果您还有其他建议请在这里填写</h5>
		<textarea id="suggest" name="suggest" onfocus=" this.value='' ;" onblur="if (this.value == '') {this.value = '填写建议或问题';}"
					required="">填写建议或问题</textarea>
				<input type="submit" onclick="createTable()" value="创建问卷">
			</form>
		</div>

	</div>
</form>
	




	<script src="js/jquery-3.6.0.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
	<script src="js/layui.js"></script>

	<script>

//添加单选题内容
		function loneAdd() {
			let problemone = $('#problem1').val();
			let problemtwo = $('#problem2').val();
			let problemthree = $('#problem3').val();
			let problemfour = $('#problem4').val();
			let question = $('#que').val();

			if (problemone.length > 0 && problemtwo.length > 0 && problemthree.length > 0 && problemfour.length > 0 && question.length > 0) {
				$.ajax({
					url: "/loneCheckDone",
					type: "POST",
					dataType: "json",
					data: $('#loneC').serialize(),
					success: function (res) {
						console.log(res);
						if (res.code === 200) {
							alert('发布问题成功')
						}
					},
					error: function (msg) {
						console.log('网络或者服务器有问题');
					}
				})
			}
		}


		//返回键
		function returns() {
			window.location.href = "/";
		}


//创建问卷按钮方法
		function createTable(){
			let titles = $('#title').val();
			let type = $('#type').val();
			let state = $('#state').val();
			let suggest = $('#suggest').val();

			if(titles.length>0 && type.length>0 && state.length>0 && suggest.length>0){
				$.ajax({
					url: "/createDone",
					type: "POST",
					dataType: "json",
					data: $('#create').serialize(),
					success: function (res) {
						console.log(res);
						if (res.code === 200) {
							alert('发布问卷成功')
						}
					},
					error: function (msg) {
						console.log('网络或者服务器有问题');
					}
				})
			}
		}

		//获取单选题id
		// let currentCheckId = '';

		// function selectloneCheckId(Id){
		// 	currentCheckId = Id;
		// }


		


		layui.use(['element', 'layer', 'util'], function () {
			var element = layui.element
				, layer = layui.layer
				, util = layui.util
				, $ = layui.$;

			//头部事件
			util.event('lay-header-event', {
				//左侧菜单事件
				menuLeft: function (othis) {
					layer.msg('展开左侧菜单的操作', { icon: 0 });
				}
				, menuRight: function () {
					layer.open({
						type: 1
						, content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
						, area: ['260px', '100%']
						, offset: 'rt' //右上角
						, anim: 5
						, shadeClose: true
					});
				}
			});

		});







		layui.use(['dropdown', 'util', 'layer', 'table'], function () {
			var dropdown = layui.dropdown
				, util = layui.util
				, layer = layui.layer
				, table = layui.table
				, $ = layui.jquery;

			dropdown.render({
				elem: '.ddddd'
				, data: [{
					title: '金融'
					, id: 101
				}, {
					title: '地产'
					, id: 102
				}, {
					title: '汽车'
					, id: 103
				}, {
					title: '手机'
					, id: 104
				}, {
					title: '电器'
					, id: 105
				}, {
					title: '数码'
					, id: 106
				}, {
					title: '家居'
					, id: 107
				}
					, {
					title: '建材'
					, id: 108
				}
					, {
					title: '洗浴'
					, id: 109
				}
					, {
					title: '化妆品'
					, id: 110
				}
					, {
					title: '服装'
					, id: 111
				}
					, {
					title: '母婴'
					, id: 112
				}
					, {
					title: '保健'
					, id: 113
				}
					, {
					title: '食品'
					, id: 114
				}
					, {
					title: '烟酒'
					, id: 115
				}
					, {
					title: '餐饮'
					, id: 116
				}
					, {
					title: '旅游'
					, id: 117
				}
					, {
					title: '游戏'
					, id: 118
				}
					, {
					title: '服务'
					, id: 119
				}
					, {
					title: '娱乐'
					, id: 120
				}
					, {
					title: '情感'
					, id: 121
				}
					, {
					title: '其它'
					, id: 122
				}
				]
				, click: function (obj) {
					this.elem.val(obj.title);
				}
				, style: 'width: 880px;'
			});
		})
	</script>
</body>

</html>